<template>
	<view>
		<VueP5 @setup="setup" @draw="draw" @keypressed='kp' @keyreleased="kr" @touchstarted='kr' @touchmoved="mv"
			@mousemoved="mv" @mousepressed='mp' @mousereleased='mr' @mousewheel="mw" @windowresized='wr'>
		</VueP5>
	</view>
</template>

<script>
	import VueP5 from 'vue-p5';
	import Boat from './boat.js';
	import Flower from './flower.js';
	import Art from './art.js'
	import Riv from './river.js'
	import Lace from './lace.js'
	import Heart from './heart.js'
	import Part from './particle.js'
	import Liquid from './liquid.js'
	import Seraph from './seraph.js'
	import Wave from './wave.js'
	import Rough from './rough.js'
	import Nebula from './nebula.js'

	export default {
		components: {
			VueP5
		},
		data() {
			return {
				sys: uni.getSystemInfoSync(),
				nb: [new Nebula(), new Rough(), new Wave(), new Seraph(), new Liquid(), new Part(), new Heart(),
					new Lace(), new Riv(), new Art(), new Flower(), new Boat()
				],
				idx: Math.floor(12 * Math.random()),
				// idx: 3,
			};
		},
		methods: {
			setup(sk) {
				console.log(this.idx)
				this.nb[this.idx].setup(sk, this.sys.windowWidth, this.sys.windowHeight)
			},
			draw(sk) {
				this.nb[this.idx].draw(sk)

			},
			wr(sk) {
				this.nb[this.idx].wr(sk)
			},
			kr(sk) {
				this.nb[this.idx].kr(sk)
			},
			kp(sk) {
				this.nb[this.idx].kp(sk)
			},
			mp(sk) {
				this.nb[this.idx].mp(sk)
			},
			mr(sk) {
				this.nb[this.idx].mr(sk)
			},
			mv(sk) {
				this.nb[this.idx].mv(sk)
			},
			mw(sk, e) {
				this.nb[this.idx].mw(sk, e)
			}
		}
	}
</script>

<style lang="scss">

</style>
